<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <!-- header -->
      <div class="header center">
        <div class="logo fl">
            <img src="./images/log.png" alt="logo">
        </div>
        <ul class="nav font_size14 fr">
          <li><a href="#">HOME</a></li>
          <li><a href="#">ABOUT</a></li>
          <li><a href="#">PROTFOLIO</a></li>
          <li><a href="#">SERVICE</a></li>
          <li><a href="#">NEWS</a></li>
          <li><a href="#">CONTACT</a></li>
        </ul>
      </div>
<!-- banner -->
      <div class="banner">
        <ul>
          <li>
            <img src="./images/banner.png" alt="">
          </li>
        </ul>  
        <ol  class="banner-list">
          <li class="acter"></li>
          <li></li>
          <li></li>
          <li></li>
        </ol>
      </div>
      <!-- 客户案例 -->
      <!-- header -->
      <div class="ScopeOfServices_header">
        <div class="ScopeOfServices_header_box">
          <span class="ScopeOfServices_header_box_left"></span>
          <div>服务范围</div>
          <span class="ScopeOfServices_header_box_right"></span>
        </div>
        <p>OUR SERVICES</p>
      </div>
      <!-- content -->
      <div class="service clearfix center ">
        <ul>
          <li>
            <img src="./images/section1-img1.png" alt="" />
            <p class="text1">1.WEB DESIGN</p>
            <p class="text2 size14">
              企业品牌网站设计/手机网站制作 动画网站创意设计
            </p>
          </li>
          <li>
            <img src="./images/section1-img2.png" alt="" />
            <p class="text1">2.GRAPHIC DESIGN</p>
            <p class="text2 size14">
              标志logo设计/产品宣传册设计 企业广告/海报设计
            </p>
          </li>
          <li>
            <img src="./images/section1-img3.png" alt="" />
            <p class="text1">3.E-BUSINESS PLAN</p>
            <p class="text2 size14">
              淘宝/天猫装修设计及运营推广 企业微博、微信营销
            </p>
          </li>
          <li style="margin-right: 0;">
            <img src="./images/section1-img4.png" alt="" />
            <p class="text1">4.MAILBOXAGENTS</p>
            <p class="text2 size14">
              腾讯/网易企业邮箱品牌代理 个性化邮箱定制开发
            </p>
          </li>
        </ul>
      </div>
      <!-- 服务范围部分完毕 -->

      <!-- 客户案例 -->
      <!-- header -->
      <div class="Customer">
        <div class="ScopeOfServices_header">
          <div class="ScopeOfServices_header_box">
            <span class="ScopeOfServices_header_box_left"></span>
            <div style="color: #66c5b4;;">{客户案例}</div>
            <span class="ScopeOfServices_header_box_right"></span>
          </div>
          <p>With the best professional technology, to design the best innovative web site</p>
        </div>
        <!-- content -->
        <div class="Customer-conter center clearfix">
          
            <ul>
              <li>
                <img src="./images/section2.png" alt="" />
              </li>
              <li>
                <img src="./images/section2.1.png" alt="" />
              </li>
              <li>
                <img src="./images/section2.2.png" alt="" />
              </li>
            </ul>
          </div>
          <a href="javascript:;" class="size14">VIEW MORE</a>
    
        </div>
      </div>
    <!-- 最新资讯 -->
    <!-- header -->
    <div class="ScopeOfServices_header">
      <div class="ScopeOfServices_header_box">
        <span class="ScopeOfServices_header_box_left"></span>
        <div>最新资讯</div>
        <span class="ScopeOfServices_header_box_right"></span>
      </div>
      <p>TEH LATEST NEWS</p>
    </div>
    <!-- content -->
    <div class="LatestNews center clearfix">
      <img src="./images/img4.png" alt="" class="fl" />
      <ul class="fl">
        <li>
          <div class="left fl">
            <p>09</p>
            Jan
          </div>
          <div class="right fl">
            <p class="p1 font_size14">网站排名进入前三的技巧说明</p>
            <p class="p2 font_size12">
              很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎
              首页，更不用说进首页前三了。那么网站优...
            </p>
          </div>
        </li>

        <li>
          <div class="left fl">
            <p>08</p>
            Jan
          </div>
          <div class="right fl">
            <p class="p1 font_size14">flash网站制作的优缺点</p>
            <p class="p2 font_size12">
              虽然HTML5程序语言出现，大有逐渐代替Flash网站制作的意味，但是过于生硬的HTML5动画效果，始终...
            </p>
          </div>
        </li>

        <li>
          <div class="left fl">
            <p>07</p>
            Jan
          </div>
          <div class="right fl">
            <p class="p1 font_size14">做个网站多少钱？</p>
            <p class="p2 font_size12">
              “做个网站多少钱？”很多客户打电话过来直接第一句就抛出来的问题。这好比买辆车多少钱，你是要...
            </p>
          </div>
        </li>

        <li>
          <div class="left fl">
            <p>06</p>
            Jan
          </div>
          <div class="right fl">
            <p class="p1 font_size14">哪些网站优化手法属于网站过度优化</p>
            <p class="p2 font_size12">
              大部分人都想让自己的网站，一夜之间出现在搜索引擎首页，独占鳌头。但是事实告诉我们罗马不是一...
            </p>
          </div>
        </li>
      </ul>
    </div>

    <!-- footer -->
    <div class="footer font_size12">
      <div class="center clearfix">
        <ul class="fr">
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Portfolio</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>
    </div>
  </body>
</html>
